<template>
  <el-dialog :custom-class="customClass"
             :visible="visible"
             :width="modalWidth"
             :modal-append-to-body="false"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="showClose"
             v-move-dialog="visible" @close="handleClose">
    <div class="modal-body">
      <slot></slot>
    </div>
    <div slot="title" class="modal-title" :style="titleStyle">
      <span style="margin-right: 20px">{{title}}</span>
      <slot name="header"></slot>
    </div>
    <div slot="footer" v-if="showFooter">
      <im-button :text="cancelBtnText" @on-click="handleCancelClick"></im-button>
      <im-button :text="okBtnText" type="primary" @on-click="handleOkClick"></im-button>
    </div>
  </el-dialog>
</template>

<script>
import imButton from '@/components/ImButton'
export default {
  name: "ImDialog",
  data() {
    return {
    }
  },
  model: {
    prop: 'visible',
    event: 'on-close'
  },
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '50%'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    },
    okBtnText: {
      type: String,
      default: '确认'
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ''
    },
    titleHeight: {
      type: [String, Number],
      default: '40px'
    },
    titleBackground: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    beforeClose: {
      type: Function,
      default: null
    }
  },
  computed: {
    titleStyle() {
      return {
        height: this.titleHeight,
        background: this.titleBackground || `transparent url("${require('@/assets/img/alert-head-icom.png')}")`
      }
    },
    customClass() {
      return this.className ? `${this.className} im-modal` : 'im-modal'
    },
    modalWidth() {
      return typeof this.width === 'number' ? `${this.width}px` : this.width
    }
  },
  methods: {
    handleCancelClick() {
      this.$emit('on-cancel')
    },
    handleOkClick() {
      this.$emit('on-ok')
    },
    handleClose() {
      this.$emit('on-cancel')
    }
  },
  directives: {
    moveDialog: {
      bind(el, binding, vnode, oldVnode) {
        let isMove = false
        let x, y, l, t
        const elHeader = el.querySelector('.el-dialog__header')
        const model = el.querySelector('.im-modal')
        model.style.display = 'block'
        model.style.position = 'absolute'
        model.style.margin = '0'
        model.style.top = ( window.innerHeight / 3 ) + 'px'
        model.style.left = ( window.innerWidth / 3 ) + 'px'
        const ol = parseInt(model.style.left)
        const ot = parseInt(model.style.top)
        model.left = ol
        model.top = ot
        elHeader.addEventListener('mousedown', function (e) {
          elHeader.style.cursor = 'move'
          x = e.clientX
          y = e.clientY
          l = model.offsetLeft
          t = model.offsetTop
          setTimeout(() => {
            isMove = true
          })
        })
        elHeader.addEventListener('mouseup', function () {
          isMove = false
          elHeader.style.cursor = 'auto'
        })
        document.addEventListener('mouseup', function () {
          if (isMove) {
            isMove = false
            elHeader.style.cursor = 'auto'
          }
        })
        document.addEventListener('mousemove', function (e) {
          if (isMove) {
            let nx = e.clientX
            let ny = e.clientY
            let nl = nx - (x - l)
            let nt = ny - (y - t)
            model.style.left = nl + 'px'
            model.style.top = nt + 'px'
          }
        })
      }
    }
  },
  components: {
    imButton
  }
}
</script>
